<template>
  <div class="learning-records">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="学员姓名">
        <el-input v-model="searchForm.studentName" placeholder="请输入学员姓名" clearable />
      </el-form-item>
      <el-form-item label="教练姓名">
        <el-input v-model="searchForm.coachName" placeholder="请输入教练姓名" clearable />
      </el-form-item>
      <el-form-item label="训练科目">
        <el-select v-model="searchForm.subject" placeholder="请选择训练科目" clearable>
          <el-option label="科目一" value="subject1" />
          <el-option label="科目二" value="subject2" />
          <el-option label="科目三" value="subject3" />
          <el-option label="科目四" value="subject4" />
        </el-select>
      </el-form-item>
      <el-form-item label="训练日期">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="recordsList"
      style="width: 100%"
      border
      v-loading="loading"
    >
      <el-table-column prop="date" label="训练日期" width="120" />
      <el-table-column prop="timeSlot" label="训练时段" width="120" />
      <el-table-column prop="studentName" label="学员姓名" width="120" />
      <el-table-column prop="coachName" label="教练姓名" width="120" />
      <el-table-column prop="subject" label="训练科目" width="100">
        <template #default="{ row }">
          <el-tag :type="getSubjectTagType(row.subject)">{{ row.subject }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="训练时长" width="100">
        <template #default="{ row }">
          {{ row.duration }}分钟
        </template>
      </el-table-column>
      <el-table-column prop="content" label="训练内容" min-width="200" show-overflow-tooltip />
      <el-table-column prop="evaluation" label="训练评价" width="120">
        <template #default="{ row }">
          <el-rate
            v-model="row.evaluation"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}分"
          />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            @click="handleView(row)"
          >查看</el-button>
          <el-button
            link
            type="primary"
            @click="handleEdit(row)"
            v-if="row.status === '待评价'"
          >评价</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情抽屉 -->
    <el-drawer
      v-model="viewDialogVisible"
      title="训练记录详情"
      size="50%"
      direction="rtl"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="学员姓名">{{ currentRecord.studentName }}</el-descriptions-item>
        <el-descriptions-item label="教练姓名">{{ currentRecord.coachName }}</el-descriptions-item>
        <el-descriptions-item label="训练日期">{{ currentRecord.date }}</el-descriptions-item>
        <el-descriptions-item label="训练时段">{{ currentRecord.timeSlot }}</el-descriptions-item>
        <el-descriptions-item label="训练科目">{{ currentRecord.subject }}</el-descriptions-item>
        <el-descriptions-item label="训练时长">{{ currentRecord.duration }}分钟</el-descriptions-item>
        <el-descriptions-item label="训练内容" :span="2">{{ currentRecord.content }}</el-descriptions-item>
        <el-descriptions-item label="训练评价" :span="2">
          <el-rate
            v-model="currentRecord.evaluation"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}分"
          />
        </el-descriptions-item>
        <el-descriptions-item label="评价备注" :span="2">{{ currentRecord.evaluationRemark || '暂无备注' }}</el-descriptions-item>
      </el-descriptions>
    </el-drawer>

    <!-- 评价抽屉 -->
    <el-drawer
      v-model="evaluateDialogVisible"
      title="训练评价"
      direction="rtl"
      size="500px"
    >
      <el-form :model="evaluateForm" label-width="100px">
        <el-form-item label="训练评分">
          <el-rate
            v-model="evaluateForm.score"
            show-score
            text-color="#ff9900"
            score-template="{value}分"
          />
        </el-form-item>
        <el-form-item label="评价备注">
          <el-input
            v-model="evaluateForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入评价备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="evaluateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEvaluation">确认</el-button>
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  studentName: '',
  coachName: '',
  subject: '',
  dateRange: []
})

// 表格数据
const loading = ref(false)
const recordsList = ref([
  {
    date: '2024-03-15',
    timeSlot: '09:00-10:00',
    studentName: '张三',
    coachName: '李教练',
    subject: '科目二',
    duration: 60,
    content: '倒车入库训练，起步、停车、转向等基本操作练习',
    evaluation: 4.5,
    status: '已完成',
    evaluationRemark: '学员表现不错，基本操作掌握良好'
  },
  {
    date: '2024-03-15',
    timeSlot: '10:00-11:00',
    studentName: '李四',
    coachName: '王教练',
    subject: '科目三',
    duration: 60,
    content: '路口转弯、变道、超车等实际道路驾驶训练',
    evaluation: 0,
    status: '待评价'
  },
  {
    date: '2024-03-15',
    timeSlot: '14:00-15:00',
    studentName: '王五',
    coachName: '张教练',
    subject: '科目二',
    duration: 60,
    content: '坡道定点停车和起步训练，档位操作练习',
    evaluation: 4.0,
    status: '已完成',
    evaluationRemark: '坡道起步需要加强练习'
  },
  {
    date: '2024-03-16',
    timeSlot: '09:00-10:00',
    studentName: '赵六',
    coachName: '李教练',
    subject: '科目二',
    duration: 60,
    content: '侧方停车训练，车距判断练习',
    evaluation: 4.8,
    status: '已完成',
    evaluationRemark: '车距判断准确，动作规范'
  },
  {
    date: '2024-03-16',
    timeSlot: '10:00-11:00',
    studentName: '钱七',
    coachName: '王教练',
    subject: '科目三',
    duration: 60,
    content: '直线行驶、加减档训练',
    evaluation: 0,
    status: '待评价'
  },
  {
    date: '2024-03-16',
    timeSlot: '14:00-15:00',
    studentName: '孙八',
    coachName: '刘教练',
    subject: '科目三',
    duration: 60,
    content: '路口左转、右转训练',
    evaluation: 4.2,
    status: '已完成',
    evaluationRemark: '转向灯使用及时，转向角度控制合适'
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 对话框
const viewDialogVisible = ref(false)
const evaluateDialogVisible = ref(false)
const currentRecord = ref({})
const evaluateForm = reactive({
  score: 0,
  remark: ''
})

// 获取科目标签类型
const getSubjectTagType = (subject) => {
  const types = {
    '科目一': 'info',
    '科目二': 'warning',
    '科目三': 'danger',
    '科目四': 'success'
  }
  return types[subject] || ''
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const types = {
    '待评价': 'warning',
    '已完成': 'success',
    '已取消': 'info'
  }
  return types[status] || ''
}

// 搜索
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  console.log('搜索条件：', searchForm)
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  handleSearch()
}

// 查看详情
const handleView = (row) => {
  currentRecord.value = row
  viewDialogVisible.value = true
}

// 评价
const handleEdit = (row) => {
  currentRecord.value = row
  evaluateForm.score = 0
  evaluateForm.remark = ''
  evaluateDialogVisible.value = true
}

// 提交评价
const submitEvaluation = () => {
  if (evaluateForm.score === 0) {
    ElMessage.warning('请选择训练评分')
    return
  }
  // TODO: 实现评价提交逻辑
  console.log('评价信息：', evaluateForm)
  evaluateDialogVisible.value = false
  ElMessage.success('评价提交成功')
}

// 分页变化
const handleSizeChange = (val) => {
  pageSize.value = val
  handleSearch()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  handleSearch()
}
</script>

<style scoped>
.learning-records {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>